﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MShop.Core.Domain.Product>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphMeta" runat="server">
    <script type="text/javascript" src="/js/ImageZoom/CJL.0.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {


            /***** 选项卡 ****/
            var $li = $(".tabMn li");
            $(".tabMn li").click(function () {

                $(this).addClass("active")
	  .siblings().removeClass("active");
                var index = $li.index($(this));
                $(".tabBox").eq(index).show().siblings().hide();
            }).hover(function () {

                $(this).addClass("hover").siblings().removeClass("hover")
            }, function () { $(this).removeClass("hover"); });

        })

    </script>
    <script type="text/javascript">

        function setSku(skuid) {
            var as0 = skuid.split(':');
            var v = document.getElementById("skuid").value;
            var array = v.split(';');
            var i = 0;
            for (var k in array) {
                var as1 = array[k].split(':');
                if (as1[0] == as0[0]) {
                    break;
                }
                i++;
            }
            array.splice(i, 1, skuid);
            document.getElementById("skuid").value = array.join(";");

        }

        function Increase() {
            document.getElementById('quanitiy').value = parseInt(document.getElementById('quanitiy').value) + 1;
            $('#scount').text(document.getElementById('quanitiy').value);
            $('#stotal').text((document.getElementById('quanitiy').value * <%=Model.ShopPrice %>).toFixed(2));
        }

        function Decrease() {
            var value = parseInt(document.getElementById('quanitiy').value) - 1;
            if (value <= 0) {
                document.getElementById('quanitiy').value = 1;
            }
            else {
                document.getElementById('quanitiy').value = value;
            }
            $('#scount').text(document.getElementById('quanitiy').value);
            $('#stotal').text((document.getElementById('quanitiy').value * <%=Model.ShopPrice %>).toFixed(2));
        }
    </script>
    <script type="text/javascript">

        var ImageZoom = function (image, viewer, options) {
            this._initialize(image, viewer, options);
            this._initLoad();
        };

        ImageZoom.prototype = {
            //初始化程序
            _initialize: function (image, viewer, options) {
                this._image = $$(image); //原图
                this._zoom = document.createElement("img"); //显示图
                this._viewer = $$(viewer); //显示框
                this._viewerWidth = 0; //显示框宽
                this._viewerHeight = 0; //显示框高
                this._preload = new Image(); //预载对象
                this._rect = null; //原图坐标
                this._repairLeft = 0; //显示图x坐标修正
                this._repairTop = 0; //显示图y坐标修正
                this._rangeWidth = 0; //显示范围宽度
                this._rangeHeight = 0; //显示范围高度
                this._timer = null; //计时器
                this._loaded = false; //是否加载
                this._substitute = false; //是否替换

                var opt = this._setOptions(options);

                this._scale = opt.scale;
                this._max = opt.max;
                this._min = opt.min;
                this._originPic = opt.originPic;
                this._zoomPic = opt.zoomPic;
                this._rangeWidth = opt.rangeWidth;
                this._rangeHeight = opt.rangeHeight;

                this.delay = opt.delay;
                this.autoHide = opt.autoHide;
                this.mouse = opt.mouse;
                this.rate = opt.rate;

                this.onLoad = opt.onLoad;
                this.onStart = opt.onStart;
                this.onMove = opt.onMove;
                this.onEnd = opt.onEnd;

                var oThis = this, END = function () { oThis._end(); };
                this._END = function () { oThis._timer = setTimeout(END, oThis.delay); };
                this._START = $$F.bindAsEventListener(this._start, this);
                this._MOVE = $$F.bindAsEventListener(this._move, this);
                this._MOUSE = $$F.bindAsEventListener(this._mouse, this);
                this._OUT = $$F.bindAsEventListener(function (e) {
                    if (!e.relatedTarget) this._END();
                }, this);

                $$CE.fireEvent(this, "init");
            },
            //设置默认属性
            _setOptions: function (options) {
                this.options = {//默认值
                    scale: 0, //比例(大图/原图)
                    max: 10, //最大比例
                    min: 1.5, //最小比例
                    originPic: "", //原图地址
                    zoomPic: "", //大图地址
                    rangeWidth: 0, //显示范围宽度
                    rangeHeight: 0, //显示范围高度
                    delay: 20, //延迟结束时间
                    autoHide: true, //是否自动隐藏
                    mouse: false, //鼠标缩放
                    rate: .2, //鼠标缩放比率
                    onLoad: $$.emptyFunction, //加载完成时执行
                    onStart: $$.emptyFunction, //开始放大时执行
                    onMove: $$.emptyFunction, //放大移动时执行
                    onEnd: $$.emptyFunction//放大结束时执行
                };
                return $$.extend(this.options, options || {});
            },
            //初始化加载
            _initLoad: function () {
                var image = this._image, originPic = this._originPic,
		useOrigin = !this._zoomPic && this._scale,
		loadImage = $$F.bind(useOrigin ? this._loadOriginImage : this._loadImage, this);
                //设置自动隐藏
                this.autoHide && this._hide();
                //先加载原图
                if (originPic && originPic != image.src) {//使用自定义地址
                    image.onload = loadImage;
                    image.src = originPic;
                } else if (image.src) {//使用元素地址
                    if (!image.complete) {//未载入完
                        image.onload = loadImage;
                    } else {//已经载入
                        loadImage();
                    }
                } else {
                    return; //没有原图地址
                }
                //加载大图
                if (!useOrigin) {
                    var preload = this._preload, zoomPic = this._zoomPic || image.src,
			loadPreload = $$F.bind(this._loadPreload, this);
                    if (zoomPic != preload.src) {//新地址重新加载
                        preload.onload = loadPreload;
                        preload.src = zoomPic;
                    } else {//正在加载
                        if (!preload.complete) {//未载入完
                            preload.onload = loadPreload;
                        } else {//已经载入
                            this._loadPreload();
                        }
                    }
                }
            },
            //原图放大加载程序
            _loadOriginImage: function () {
                this._image.onload = null;
                this._zoom.src = this._image.src;
                this._initLoaded();
            },
            //原图加载程序
            _loadImage: function () {
                this._image.onload = null;
                if (this._loaded) {//大图已经加载
                    this._initLoaded();
                } else {
                    this._loaded = true;
                    if (this._scale) {//有自定义比例才用原图放大替换大图
                        this._substitute = true;
                        this._zoom.src = this._image.src;
                        this._initLoaded();
                    }
                }
            },
            //大图预载程序
            _loadPreload: function () {
                this._preload.onload = null;
                this._zoom.src = this._preload.src;
                if (this._loaded) {//原图已经加载
                    //没有使用替换
                    if (!this._substitute) { this._initLoaded(); }
                } else {
                    this._loaded = true;
                }
            },
            //初始化加载设置
            _initLoaded: function (src) {
                //初始化显示图
                this._initSize();
                //初始化显示框
                this._initViewer();
                //初始化数据
                this._initData();
                //开始执行
                $$CE.fireEvent(this, "load");
                this.onLoad();
                this.start();
            },
            //初始化显示图尺寸
            _initSize: function () {
                var zoom = this._zoom, image = this._image, scale = this._scale;
                if (!scale) { scale = this._preload.width / image.width; }
                this._scale = scale = Math.min(Math.max(this._min, scale), this._max);
                //按比例设置显示图大小
                zoom.width = Math.ceil(image.width * scale);
                zoom.height = Math.ceil(image.height * scale);
            },
            //初始化显示框
            _initViewer: function () {
                var zoom = this._zoom, viewer = this._viewer;
                //设置样式
                var styles = { padding: 0, overflow: "hidden" }, p = $$D.getStyle(viewer, "position");
                if (p != "relative" && p != "absolute") { styles.position = "relative"; };
                $$D.setStyle(viewer, styles);
                zoom.style.position = "absolute";
                //插入显示图
                if (!$$D.contains(viewer, zoom)) { viewer.appendChild(zoom); }
            },
            //初始化数据
            _initData: function () {
                var zoom = this._zoom, image = this._image, viewer = this._viewer,
		scale = this._scale, rangeWidth = this._rangeWidth, rangeHeight = this._rangeHeight;
                //原图坐标
                this._rect = $$D.rect(image);
                //修正参数
                this._repairLeft = image.clientLeft + parseInt($$D.getStyle(image, "padding-left"));
                this._repairTop = image.clientTop + parseInt($$D.getStyle(image, "padding-top"));
                //设置范围参数和显示框大小
                if (rangeWidth > 0 && rangeHeight > 0) {
                    rangeWidth = Math.ceil(rangeWidth);
                    rangeHeight = Math.ceil(rangeHeight);
                    this._viewerWidth = Math.ceil(rangeWidth * scale);
                    this._viewerHeight = Math.ceil(rangeHeight * scale);
                    $$D.setStyle(viewer, {
                        width: this._viewerWidth + "px",
                        height: this._viewerHeight + "px"
                    });
                } else {
                    var styles;
                    if (!viewer.clientWidth) {//隐藏
                        var style = viewer.style;
                        styles = {
                            display: style.display,
                            position: style.position,
                            visibility: style.visibility
                        };
                        $$D.setStyle(viewer, {
                            display: "block", position: "absolute", visibility: "hidden"
                        });
                    }
                    this._viewerWidth = viewer.clientWidth;
                    this._viewerHeight = viewer.clientHeight;
                    if (styles) { $$D.setStyle(viewer, styles); }

                    rangeWidth = Math.ceil(this._viewerWidth / scale);
                    rangeHeight = Math.ceil(this._viewerHeight / scale);
                }
                this._rangeWidth = rangeWidth;
                this._rangeHeight = rangeHeight;
            },
            //开始
            _start: function () {
                clearTimeout(this._timer);
                var viewer = this._viewer, image = this._image, scale = this._scale;
                viewer.style.display = "block";
                $$CE.fireEvent(this, "start");
                this.onStart();
                $$E.removeEvent(image, "mouseover", this._START);
                $$E.removeEvent(image, "mousemove", this._START);
                $$E.addEvent(document, "mousemove", this._MOVE);
                $$E.addEvent(document, "mouseout", this._OUT);
                this.mouse && $$E.addEvent(document, $$B.firefox ? "DOMMouseScroll" : "mousewheel", this._MOUSE);
            },
            //移动
            _move: function (e) {
                clearTimeout(this._timer);
                var x = e.pageX, y = e.pageY, rect = this._rect;
                if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
                    this._END(); //移出原图范围
                } else {
                    var pos = {}, scale = this._scale, zoom = this._zoom,
			viewerWidth = this._viewerWidth,
			viewerHeight = this._viewerHeight;
                    //修正坐标
                    pos.left = viewerWidth / 2 - (x - rect.left - this._repairLeft) * scale;
                    pos.top = viewerHeight / 2 - (y - rect.top - this._repairTop) * scale;

                    $$CE.fireEvent(this, "repair", e, pos);
                    //范围限制
                    x = Math.ceil(Math.min(Math.max(pos.left, viewerWidth - zoom.width), 0));
                    y = Math.ceil(Math.min(Math.max(pos.top, viewerHeight - zoom.height), 0));
                    //设置定位
                    zoom.style.left = x + "px";
                    zoom.style.top = y + "px";

                    $$CE.fireEvent(this, "move", e, x, y);
                    this.onMove();
                }
            },
            //结束
            _end: function () {
                $$CE.fireEvent(this, "end");
                this.onEnd();
                this.autoHide && this._hide();
                this.stop();
                this.start();
            },
            //隐藏
            _hide: function () {
                this._viewer.style.display = "none";
            },
            //鼠标缩放
            _mouse: function (e) {
                this._scale += (e.wheelDelta ? e.wheelDelta / (-120) : (e.detail || 0) / 3) * this.rate;

                var opt = this.options;
                this._rangeWidth = opt.rangeWidth;
                this._rangeHeight = opt.rangeHeight;

                this._initSize();
                this._initData();
                this._move(e);
                e.preventDefault();
            },
            //开始
            start: function () {
                if (this._viewerWidth && this._viewerHeight) {
                    var image = this._image, START = this._START;
                    $$E.addEvent(image, "mouseover", START);
                    $$E.addEvent(image, "mousemove", START);
                }
            },
            //停止
            stop: function () {
                clearTimeout(this._timer);
                $$E.removeEvent(this._image, "mouseover", this._START);
                $$E.removeEvent(this._image, "mousemove", this._START);
                $$E.removeEvent(document, "mousemove", this._MOVE);
                $$E.removeEvent(document, "mouseout", this._OUT);
                $$E.removeEvent(document, $$B.firefox ? "DOMMouseScroll" : "mousewheel", this._MOUSE);
            },
            //修改设置
            reset: function (options) {
                this.stop();

                var viewer = this._viewer, zoom = this._zoom;
                if ($$D.contains(viewer, zoom)) { viewer.removeChild(zoom); }

                var opt = $$.extend(this.options, options || {});
                this._scale = opt.scale;
                this._max = opt.max;
                this._min = opt.min;
                this._originPic = opt.originPic;
                this._zoomPic = opt.zoomPic;
                this._rangeWidth = opt.rangeWidth;
                this._rangeHeight = opt.rangeHeight;

                //重置属性
                this._loaded = this._substitute = false;
                this._rect = null;
                this._repairLeft = this._repairTop =
	this._viewerWidth = this._viewerHeight = 0;

                this._initLoad();
            },
            //销毁程序
            dispose: function () {
                $$CE.fireEvent(this, "dispose");
                this.stop();
                if ($$D.contains(this._viewer, this._zoom)) {
                    this._viewer.removeChild(this._zoom);
                }
                this._image.onload = this._preload.onload =
		this._image = this._preload = this._zoom = this._viewer =
		this.onLoad = this.onStart = this.onMove = this.onEnd =
		this._START = this._MOVE = this._END = this._OUT = null
            }
        }

    </script>
    <style type="text/css">
        .container
        {
            position: relative;
        }
        
        .izImage, .izViewer
        {
            border: 1px solid #000;
            background: #fff url('http://www.cnblogs.com/images/cnblogs_com/cloudgamer/169629/o_loading.gif') no-repeat center;
        }
        .izImage
        {
            width: 230px;
            cursor: crosshair;
        }
        .izViewer
        {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 260px;
            top: 0;
            display: none;
        }
        
        .izViewer div
        {
            position: absolute;
            border: 0 dashed #999;
            top: 0;
            left: 0;
            z-index: 999;
            width: 100%;
            height: 100%;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 <% MShop.Web.Controllers.ControllerBase cb = this.ViewContext.Controller as MShop.Web.Controllers.ControllerBase; %>
    <div id="content" class="ovfl">
        <div id="left" class="side fl">
            <div class="s_box sb_1">
                <h2 class="colorFF0000">
                    一口价商品推荐</h2>
                <div class="sp_tj">
                    <%=Html.Action("RecommendProduct") %>
                </div>
            </div>
            <div class="fl">
                <div class="s_box sb_1">
                    <h2 class="colorFF0000">
                        热卖商品</h2>
                    <div class="sp_tj">
                        <%=Html.Action("TopProduct")%>
                    </div>
                </div>
            </div>
        </div>
    <div id="right" class="main fr">
        <% using (Html.BeginForm())
           { %>
        <div class="showImg ovfl">
            <div class="prdImg fl">
                <div class="container">
                    <img src="<%=Model.ImageUrl %>" id="idImage" class="izImage thumb" alt="<%=Model.ProductName%>" />
                    <div id="idViewer" class="izViewer">
                        <div style="height: 50%; border-bottom-width: 1px;">
                        </div>
                        <div style="width: 50%; border-right-width: 1px;">
                        </div>
                    </div>
                </div>
                <div>
                    <ul>
                        <% foreach (var item in Model.ProductImg)
                           {  %>
                        <li><a href="#this" onclick="$('#idImage').attr('src',$('#hidimg<%=item.Id %>').val());iz.reset({ originPic: '<%=item.ImageUrl %>', zoomPic: '' });">
                            <img class="small" src='<%=item.ThumbImageUrl %>' alt="<%=Model.ProductName%>" /></a>
                            <input type="hidden" id="hidimg<%=item.Id %>" value='<%=item.ImageUrl %>' />
                        </li>
                        <%} %>
                    </ul>
                </div>
            </div>
            <div class="prdInfo fl">
                <ul>
                    <li>
                        <h2 class="nowPrice" id="productname">
                            <%=Model.ProductName%></h2>
                    </li>
                    <li><span class="color2">商城价：￥<%=Model.ShopPrice %></span></li>
                    <li><del>市场价：￥<%=Model.Price %></del></li>
                    <li>您的价格：<span id="nowPrice" class="nowPrice">￥<%=Model.ShopPrice %></span></li>
                    <%=Html.Partial("product/DisplaykeyPropControl", Model)%>
                    <%=Html.Partial("product/DisplayitemPropControl", Model)%>
                    <%=Html.Partial("product/DisplaysalePropControl", Model)%>
                    <li>货号：<%=Model.Id %></li>
                    
                    <li>
                        <h3>
                            积分：<%=Model.Points %>(<a>积分帮助</a>)</h3>
                        <div>       
                        <p>
                         网友综合评分：
                                <img src="/images/product/graygood3.jpg" alt="" />
                                <%=Model.ProductComment.Count(x=>x.Star==3) %>个好评
                                <img src="/images/product/graygood2.jpg" alt="" />
                                     <%=Model.ProductComment.Count(x=>x.Star==2) %>个中评
                                <img src="/images/product/graygood1.jpg" alt="" />    
                                     <%=Model.ProductComment.Count(x=>x.Star==1) %>个差评    
                        </p>                    
                            <% if (Model.SaleNum.HasValue)
                               { %>
                            <p>
                                已经售出<%=Model.SaleNum%>件
                            </p>
                            <%} %>
                            <p>
                                我要买 <a href="#this" onclick="Decrease();">
                                    <img src="/images/cart_icon1.gif" /></a>
                                <input value="1" maxlength="3" style="width: 22px;" onpaste="return false;" onkeyup="value=value.replace(/[^0-9_]/g,'')"
                                    name="quanitiy" type="text" id="quanitiy" class="txt" />
                                <a href="#this" onclick="Increase();">
                                    <img src="/images/cart_icon2.gif" /></a> 件</p>
                            <p>
                                总价：
                                <%=Model.ShopPrice %>
                                *<span id="scount">1</span>=<span id="stotal"><%=Model.ShopPrice %></span>
                            </p>
                            <p class="btn">
                                <input type="image" src="/images/buy.gif" alt="购买商品" class="buy" />
                                <a href="#this" onclick="addToFav(<%=Model.Id %>);">
                                    <img src="/images/fav.gif" alt="收藏商品" /></a>
                            </p>
                            <%=Html.Partial("sharedblog") %>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tabWarp">
            <ul class="tabMn">
                <li class="active">商品信息</li>
                <li>售后服务</li>
                <li>包装清单</li>
                <li>规格参数</li>
            </ul>
            <div class="tabContent">
                <div class="tabBox show">
                    <%=Model.Desc %>
                </div>
                <div class="tabBox">
                    <%=Model.Warranty %>
                    <div>
                        <strong><font color="#cc3300">声明:</font></strong>因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
                    </div>
                </div>
                <div class="tabBox">
                    <%=Model.Package %>
                    <div>
                        <strong><font color="#cc3300">声明:</font></strong>因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
                    </div>
                </div>
                <div class="tabBox">
                    <%=Model.Specification %>
                    <div>
                        <strong><font color="#cc3300">声明:</font></strong>因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！
                    </div>
                </div>
            </div>
        </div>
        <%
            StringBuilder sb = new StringBuilder();
            foreach (var item in Model.ItemCat.ItemCatProp)
            {
                if (item.ItemProp.IsSaleProp)
                {

                    if (item.ItemProp.IsEnumProp)
                    {
                        ItemProp obj = item.ItemProp;
                        var values = Model.ProductSkuProp.Where(x => x.ItemPropId == item.ItemPropId && x.ProductId == Model.Id && x.ItemCatPropId == item.Id)
                            .Select(x => x.PropValue);
                        int i = 0;
                        foreach (var s in values)
                        {
                            if (i == 0)
                            {
                                sb.Append(item.ItemProp.Id);
                                sb.Append(":");
                                sb.Append(s);
                                sb.Append(";");
                            }
                            i++;
                        }
                    }
                }
            }
            Response.Write(Html.Hidden("skuid", sb.ToString()));
        %>
        <%} %>
        <%=Html.Action("productcomment",new{id=Model.Id}) %>
       
    </div>
    </div>
</asp:Content>
<asp:Content runat="server" ID="cf" ContentPlaceHolderID="cphFooter">
    <script type="text/javascript">

 var iz = new ImageZoom("idImage", "idViewer", { onLoad: function () { } });
        iz.mouse = true;

  var addToFav = function (id) {
            $.get('/product/addtofav/' + id + '?rnd=' + (new Date()).getMilliseconds,
       function (result) {
           if (result == "-1") {
               if (window.confirm('你还没有登陆，登陆后才能收藏，确认要登陆吗？')) {
                   location.href = '/account/logon?returnUrl=' + location.href;
               }
           }
           if (result == "-100") {
               window.alert('收藏不成功，请重试。');
           }
           if (result == "0") {
               window.alert('你已经收藏了该商品，请不要重复收藏。');
           }
           if (result == "1") {
               window.alert('成功收藏该商品。');
           }
       }, "text");
   };
   var addComment = function () {

       var length = $('#comment').val().length;
       if (length < 5) {
           alert('你的评论也太短了吧，起码要5个字符');
           return;
       }


       var starvalue = 3;
       $("input[name='star']").each(function () {
           if ($(this).attr("checked")) {
               starvalue = $(this).attr("value");
           }
       });
       $.post('/product/addcomment?gd=' + new Date().getMilliseconds.toString() + '', { userid: $('#userid').val(), username: $('#username').val(), star: starvalue, comment: $('#comment').val(), productid: $('#productid').val(), checkcode: document.getElementById("checkcode").value },
          function (result) {
              switch (result.JsonType) {
                  case "1":
                      alert('你的浏览器不支持Cookie。');
                      break;
                  case "2":
                      alert('请输入正确的验证码。');
                      break;
                  case "10":
                      alert('发表评论成功，稍后将会审核你的评论。');
                      window.location.reload();
                      break;
                  case "4":
                      alert('网络出现问题或者录入数据有误。');
                      break;
              }
          }, "json");
   }
    </script>
</asp:Content>
